<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <div id="structure" class="section scrollspy">
        <h4>Introduction</h4>
        <p class="caption">This is a slide out menu. You can add a dropdown to your sidebar by using our collapsible component. If you want to see a demo, our sidebar will use this on smaller screens. To use this in conjunction with a fullscreen navigation, you have to use two copies of the same UL.</p>

        <a href="#" data-activates="slide-out" class="btn button-collapse">Side nav demo</a>

        <ul id="slide-out" class="side-nav">
          <li><div class="user-view">
            <div class="background">
              <img src="images/office.jpg">
            </div>
            <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
            <a href="#!name"><span class="white-text name">John Doe</span></a>
            <a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
          </div></li>
          <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
          <li><a href="#!">Second Link</a></li>
          <li><div class="divider"></div></li>
          <li><a class="subheader">Subheader</a></li>
          <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
        </ul>

        <h4>HTML Structure</h4>
        <pre><code class="language-markup col s12">
  &lt;ul id="slide-out" class="side-nav">
    &lt;li>&lt;div class="user-view">
      &lt;div class="background">
        &lt;img src="images/office.jpg">
      &lt;/div>
      &lt;a href="#!user">&lt;img class="circle" src="images/yuna.jpg">&lt;/a>
      &lt;a href="#!name">&lt;span class="white-text name">John Doe&lt;/span>&lt;/a>
      &lt;a href="#!email">&lt;span class="white-text email">jdandturk@gmail.com&lt;/span>&lt;/a>
    &lt;/div>&lt;/li>
    &lt;li>&lt;a href="#!">&lt;i class="material-icons">cloud&lt;/i>First Link With Icon&lt;/a>&lt;/li>
    &lt;li>&lt;a href="#!">Second Link&lt;/a>&lt;/li>
    &lt;li>&lt;div class="divider">&lt;/div>&lt;/li>
    &lt;li>&lt;a class="subheader">Subheader&lt;/a>&lt;/li>
    &lt;li>&lt;a class="waves-effect" href="#!">Third Link With Waves&lt;/a>&lt;/li>
  &lt;/ul>
  &lt;a href="#" data-activates="slide-out" class="button-collapse">&lt;i class="material-icons">menu&lt;/i>&lt;/a>
        </code></pre>
      </div>

      <div id="initialization" class="section scrollspy">
        <h4>jQuery Plugin Initialization</h4>
        <pre><code class="language-javascript col s12">
  // Initialize collapse button
  $(".button-collapse").sideNav();
  // Initialize collapsible (uncomment the line below if you use the dropdown variation)
  //$('.collapsible').collapsible();
        </code></pre>
      </div>


      <div id="options" class="scrollspy section">
        <h4>Options</h4>
        <p>You can customize the sideNav by setting your own width and the alignment of the menu. </p>
        <pre><code class="language-javascript">
  $('.button-collapse').sideNav({
      menuWidth: 300, // Default is 300
      edge: 'right', // Choose the horizontal origin
      closeOnClick: true, // Closes side-nav on &lt;a> clicks, useful for Angular/Meteor
      draggable: true, // Choose whether you can drag to open on touch screens,
      onOpen: function(el) { /* Do Stuff* / }, // A function to be called when sideNav is opened
      onClose: function(el) { /* Do Stuff* / }, // A function to be called when sideNav is closed
    }
  );
        </code></pre>
      </div>

      <div id="method" class="section scrollspy">
        <h4>jQuery Plugin Methods</h4>
        <p>We have methods to show and hide your sidebar you can use to programmatically control your sidebar.</p>
        <pre><code class="language-javascript col s12">
  // Show sideNav
  $('.button-collapse').sideNav('show');
  // Hide sideNav
  $('.button-collapse').sideNav('hide');
  // Destroy sideNav
  $('.button-collapse').sideNav('destroy');
        </code></pre>
      </div>

      <div id="variations" class="scrollspy section">
        <h2 class="header">Variations</h2>
        <p class="caption">
          Here are some useful variations and additional elements you can add to your sidebar.
        </p>

        <h4>Dropdown HTML Structure</h4>
          <p>Add collapsible menus to your sidebar.</p>
          <pre><code class="language-markup col s12">
    &lt;ul id="slide-out" class="side-nav">
      &lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
      &lt;li class="no-padding">
        &lt;ul class="collapsible collapsible-accordion">
          &lt;li>
            &lt;a class="collapsible-header">Dropdown&lt;i class="material-icons">arrow_drop_down&lt;/i>&lt;/a>
            &lt;div class="collapsible-body">
              &lt;ul>
                &lt;li>&lt;a href="#!">First&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#!">Second&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#!">Third&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#!">Fourth&lt;/a>&lt;/li>
              &lt;/ul>
            &lt;/div>
          &lt;/li>
        &lt;/ul>
      &lt;/li>
    &lt;/ul>
    &lt;ul class="right hide-on-med-and-down">
      &lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
      &lt;li>&lt;a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown&lt;i class="material-icons right">arrow_drop_down&lt;/i>&lt;/a>&lt;/li>
      &lt;ul id='dropdown1' class='dropdown-content'>
        &lt;li>&lt;a href="#!">First&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#!">Second&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#!">Third&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#!">Fourth&lt;/a>&lt;/li>
      &lt;/ul>
    &lt;/ul>
    &lt;a href="#" data-activates="slide-out" class="button-collapse">&lt;i class="material-icons">menu&lt;/i>&lt;/a>
          </code></pre><br>

          <h4>Fullscreen HTML Structure</h4>
          <p>If you want the menu to be accessible on all screensizes you just have to add a simple helper class <code class="language-markup">show-on-large</code> to the <code class="language-markup">.button-collapse</code>. </p>

          <pre><code class="language-markup col s12">
    &lt;ul id="slide-out" class="side-nav">
      &lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
    &lt;/ul>
    &lt;a href="#" data-activates="slide-out" class="button-collapse show-on-large">&lt;i class="material-icons">menu&lt;/i>&lt;/a>
          </code></pre><br>

          <h4>Fixed HTML Structure</h4>
          <p>Add the class <code class="language-markup">fixed</code> to have the sideNav be fixed and open on large screens and hides to the regular functionality on smaller screens. Our sideNav on the left is an example of this.</p>
          <pre><code class="language-markup col s12">
    &lt;ul id="slide-out" class="side-nav fixed">
      &lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
    &lt;/ul>
    &lt;a href="#" data-activates="slide-out" class="button-collapse">&lt;i class="material-icons">menu&lt;/i>&lt;/a>
          </code></pre>
          <p>If you are planning on using this you will have to offset your content by the width of the side menu. Place the padding on where the offset content will be, which in our case is in header, main and footer.</p>
          <pre><code class="language-css col s12">
    header, main, footer {
      padding-left: 300px;
    }

    @media only screen and (max-width : 992px) {
      header, main, footer {
        padding-left: 0;
      }
    }
          </code></pre>
        </div>
      </div>

    <!-- Table of Contents -->
    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#structure">Structure</a></li>
            <li><a href="#initialization">Intialization</a></li>
            <li><a href="#options">Plugin Options</a></li>
            <li><a href="#method">Methods</a></li>
            <li><a href="#variations">Variations</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>
